﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rect</title>
    <style type="text/css">
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }
    </style>
    <script src="../../Scripts/jquery.min.js"></script>
    <script src="../../Scripts/JScriptCommon.js"></script>
    <script type="text/javascript">
        var Rect = {
            //当前正在画的矩形对象
            obj: null,
            //画布
            container: null,
            //初始化函数
            init: function (containerId) {
                Rect.container = document.getElementById(containerId);
                if (Rect.container) {
                    //鼠标按下时开始画
                    Rect.container.onmousedown = Rect.start;
                }
                else {
                    alert('You should specify a valid container!');
                }
            },
            start: function (e) {
                deleteDiv();
                var o = Rect.obj = document.createElement('div');
                o.style.position = "absolute";
                // mouseBeginX，mouseBeginY是辅助变量，记录下鼠标按下时的位置
                o.id = "creatediv";
                o.style.zIndex = 1000;
                o.style.left = o.mouseBeginX = Rect.getEvent(e).x + document.documentElement.scrollLeft;
                o.style.top = o.mouseBeginY = Rect.getEvent(e).y + document.documentElement.scrollTop;
                o.style.height = 0;
                o.style.width = 0;

                o.style.border = "solid red 1px";
                //把当前画出的对象加入到画布中
                Rect.container.appendChild(o);
                //处理onmousemove事件
                Rect.container.onmousemove = Rect.move;
                //处理onmouseup事件
                Rect.container.onmouseup = Rect.end;
            },
            move: function (e) {
                var o = Rect.obj;
                //dx，dy是鼠标移动的距离
                var dx = Rect.getEvent(e).x + document.documentElement.scrollLeft - o.mouseBeginX;
                var dy = Rect.getEvent(e).y + document.documentElement.scrollTop - o.mouseBeginY;
                //如果dx，dy <0,说明鼠标朝左上角移动，需要做特别的处理
                if (dx < 0) {
                    o.style.left = Rect.getEvent(e).x + document.documentElement.scrollLeft;
                }
                if (dy < 0) {
                    o.style.top = Rect.getEvent(e).y + document.documentElement.scrollTop;
                }
                o.style.height = Math.abs(dy);
                o.style.width = Math.abs(dx);
            },
            end: function (e) {
                //onmouseup时释放onmousemove，onmouseup事件句柄
                Rect.container.onmousemove = null;
                Rect.container.onmouseup = null;
                Rect.obj = null;
            },
            //辅助方法，处理IE和FF不同的事件模型
            getEvent: function (e) {
                if (typeof e == 'undefined') {
                    e = window.event;
                }
                //alert(e.x?e.x : e.layerX);
                if (typeof e.x == 'undefined') {
                    e.x = e.layerX;
                }
                if (typeof e.y == 'undefined') {
                    e.y = e.layerY;
                }
                return e;
            }
        };
        function deleteDiv() {
            var my = document.getElementById("creatediv");
            if (my != null)
                my.parentNode.removeChild(my);
        }

        $(function () {
            $('#btnreturn').click(function () {

                //alert($('#creatediv').offset().top);
                //alert($('#creatediv').offset().left);
                var arr = new Array(0);
                arr.push($('#creatediv').position().left + "," + $('#creatediv').position().top + "," + ($('#creatediv').position().left + $('#creatediv').width()) + "," + ($('#creatediv').position().top + $('#creatediv').height()));
                arr.push("^"); //主键列和显示列的分割符 ^ 
                arr.push($('#creatediv').position().left + "," + $('#creatediv').position().top + "," + ($('#creatediv').position().left + $('#creatediv').width()) + "," + ($('#creatediv').position().top + $('#creatediv').height()));
                //主键列和显示列之间用 ^ 分割   每一项用 , 分割
                if (arr.length == 3) {//一条数据和多于一条
                    returnParent(arr.join("&")); //每一项用 & 分割
                }
                return false;
            });
            var dt = '<%= ViewData["floor"]%>';
             
            $('#floormap').attr("src", "../../Images/" + dt + ".jpg");

        });
    </script>
</head>
<body>
    <div id="main" style="background-image: url(../../Images/touming.png); position: absolute; width: 1920px; height: 1080px; cursor: default; z-index: 9999"></div>
    <div style="position: relative; z-index: 1; width: 1920px; height: 1080px; cursor: default; top: 0; left: 0;">
        <img id="floormap" src="../../Images/3F.jpg" style="width: 1920px; height: 1080px;" />
    </div>
    <div>
        <input id="btnreturn" value="确定" type="button" />
    </div>
</body>
<script type="text/javascript">
    //初始化
    Rect.init("main");
</script>
</html>

